Skip to content

Draw an SVG's clipped picture where the author put it - #99

Merged
marcosqlbi merged 1 commit into
mainfrom
fix/svg-image-clip
Sep 3, 2026
Merged

Draw an SVG's clipped picture where the author put it#99
marcosqlbi merged 1 commit into
mainfrom
fix/svg-image-clip

Conversation

@marcosqlbi

Copy link
Copy Markdown
Collaborator

Why

Fixes #98. An SVG that embeds a bitmap and clips it, as the attached illustration frames a screenshot, drew the bitmap shifted and partly blank.

Cause

SharpVectors builds a drawing group for an <image> that carries the scale and offset for the image's width, height, and preserveAspectRatio, and puts the image's own clip-path on that same group. WPF applies a group's clip in the group's local space, so a clip written in page coordinates (140,310 in the report) is scaled and shifted along with the bitmap and lands at 254,564. The blank band above and to the left of the picture is exactly that displacement. It happens without preserveAspectRatio too, since the size alone produces the transform. 1.8.5 is the latest SharpVectors release and has the same code.

Fix

SvgMarkup.HoistImageClips in Core moves an image's clip-path, and its transform with it so the clip keeps the space the author meant, onto a <g> around the image before the markup is decoded. SharpVectors handles a clipped group correctly, as the rendering of the attached SVG now shows. The stored asset is untouched; only what is handed to the renderer changes, with formatting disabled so no whitespace is added between the runs of a <text>. Markup that does not parse is passed through for the renderer to reject in its own words.

Smoke tests cover the hoist, the pass-through of markup with nothing to hoist, and unparsable input. The 1.3.0 release notes and decision 21 record it.

🤖 Generated with Claude Code

SharpVectors puts an image's own clip-path on the same drawing group as
the scale and offset it builds for the image's width, height, and aspect
ratio, so a clip written in page coordinates is transformed along with
the bitmap and lands elsewhere: the picture came out shifted and partly
blank. The clip, and the image's transform with it, is now hoisted onto
a group around the image before decoding, which is what the markup
means and what the renderer handles correctly. The stored asset is
untouched; only what is handed to the renderer changes.

Fixes #98.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
@marcosqlbi
marcosqlbi merged commit 705fec3 into main Sep 3, 2026
5 checks passed
@marcosqlbi
marcosqlbi deleted the fix/svg-image-clip branch September 3, 2026 22:35
marcosqlbi added a commit that referenced this pull request Sep 5, 2026
…labels readable (#102)

## Why

Importing an infographic SVG showed two rendering defects. Logos the
file embeds as bitmaps came out at the wrong size: a GitHub Copilot mark
saved at 216 DPI drew at less than half the width of its box, and the
OpenAI and Power BI marks saved at 72 DPI a third too large. And the
lane labels above the arrows, `TOOL CALLS`, `MODEL OPS`, `THE
INTERFACE`, collapsed into an unreadable pile of letters. Chrome draws
the same file as the author meant.

## Cause

Both are SharpVectors 1.8.5 behaviours, checked against its source.

**Bitmap size.** `WpfImageRendering` fits an embedded bitmap into its
`<image>` using the decoded picture's WPF `Width` and `Height`. Those
are device-independent units, so they scale with the DPI the PNG or JPEG
declares: a 1024-pixel PNG at 72 DPI measures 1365 units, a 2200-pixel
PNG at 216 DPI measures 978. Browsers measure pixels. The ratios seen on
the board are exactly 96/72 and 96/216, and stripping the DPI metadata
from a copy of the file made the renderer agree with Chrome.

**Collapsed labels.** `WpfHorzTextRenderer` draws text that has
`letter-spacing` one glyph at a time and gives every glyph the text's
own `TextAlignment`. With `text-anchor="middle"` each glyph is centred
on the pen and the pen advances only half a glyph; with `end` it does
not advance at all. Text anchored at its start goes through the same
path correctly.

## Fix

- `SvgImageCodec` installs a `WpfEmbeddedImageVisitor` that decodes
base64 data URIs itself and returns the same pixels at 96 DPI, so one
unit is one pixel. Everything else, and anything that fails to decode,
falls through to the renderer's own reader, still under
`ExternalResourcesAccessModes.Ignore`.
- `SvgMarkup.Rewrite` (which now also carries the clip hoist from #99,
in a single parse) removes `letter-spacing` from `<text>` and `<tspan>`
whose effective `text-anchor`, own, inherited, or written in `style`, is
`middle` or `end`. The label is then measured and placed as one string,
where the author put it and set slightly tighter than they asked.
Spacing the renderer already ignores, such as a value with a unit, and
spacing on start-anchored text is left alone.

The stored asset is untouched; only what is handed to the renderer
changes. Decision 21 and the 1.3.0 release notes record both.

## Verification

Release build clean, smoke tests pass with new cases for the
letter-spacing rule and the renamed entry point. The rebuilt application
opened a `.wimport` with the reported file: logos match Chrome's sizes
and the lane labels read correctly and centred over their arrows. All
nine SVGs in the same figure set render through the new codec with no
regression, including the clipped-screenshot case from #99.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5.1 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SVG not properly rendered when bitmaps are embedded

1 participant